<template>
	<view>
		<a-nabbar name="资讯详情"  :custom-back="customBack"/>
		<u-swiper height="634" :list="bannerList" @click="bannerListPreview"></u-swiper>
		<view class="u-padding-32 padding-env content">
			<view class="u-flex u-row-between">
				<text class="text-bold box-title u-font-36">{{item.title}}</text>
				<view  class="share u-position-relative" >
					<u-icon name="zhuanfa" size="40" custom-prefix="custom-icon" color="#765CFE"></u-icon>
					<button open-type="share" class="open-share u-position-absolute"></button>
				</view>
			</view>
			<view class="u-flex u-row-between u-margin-top-22  u-padding-bottom-24" >
				<view class="u-flex">
					<item-image :type="'1'" :img="item.avatar"  :size="56"  class="u-margin-right-8"  :fade="false"  />
					<text class="u-font-28 box-title">{{item.createName || ''}}</text>
				</view>
				
			</view>
			<view class="u-flex u-row-between">
				<view class="u-font-22 text-order-time">
					发布时间：{{item.time || ''}}
				</view>
				<view class="u-flex">
					<u-icon  name="chakan" size="30" color="#999" custom-prefix="index-custom-icon"></u-icon>
					<!-- <u-image src="/static/images/read.png" width="32" height="32"  :lazy-load="false" :show-loading="false"  :fade="false"></u-image> -->
					<text class="u-font-20 text-tips  u-margin-left-8">{{item.browse || 0}}</text>
				</view>
			</view>
			<view class="desc  u-font-24 u-padding-top-24">
				<u-parse :html="item.content" :tag-style="{
					div: 'word-break: break-all;',
					'*':'max-width:100%'
				}"></u-parse>
			</view>
		<!-- 留言板 -->
			<view style="margin-top: 75rpx" >
			<item-box padding="0">
        <view class="u-flex u-row-between">
 						<view class="">
 							<text style="font-size: 32rpx">评论</text>
              
 							<!-- <text class="box-title u-font-24 u-margin-left-24"
 								v-if="replyListTotal>0">{{replyListTotal}}条</text> -->
 						</view>
 						<view  style="font-size: 22rpx" @click="goCommentsDatail">
 							查看更多 <u-icon name="arrow-right"></u-icon>
 						</view>
 					</view>
           <view class="title-border"></view>
				<comment v-if="commentsList.length > 0" @onFocus="onFocus" :commentsList="commentsList" @delete="deleteCommentsId($event)"></comment>
         <view v-else class="comentsNone">暂无评论</view>
			</item-box>
		</view>
		</view>      	
    <comment-inputs :focus="focus" @input="getContent($event)" @click="saveComments($event)" :placeholder="comments.content"></comment-inputs>
   
	</view>
</template>

<script>
import CommentInputs from '../acomponents/commentInputs.vue';
import comment from '../acomponents/comment.vue';
import { delCommentvideoInfo, saveCommentsInfo, getInformationComments } from '@/api/advertising.js';
	import {getDetail} from '@/api/crud.js'
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				apiModule:'sns',
				item:{},
        comments: {
        content: '',
        parentCreater:''
      },
      commentsList: [],
      focus:false,
      option:{}
			};
		},
    components: {
      CommentInputs,comment
    },
		computed:{
			bannerList(){
				return this.splitStr(this.item.img).map(this.imgFilter)
			},
			...mapGetters(['loginForm','scene'])
		},
		onLoad(option) {
      console.log(option,'option');
      this.option = option
			getDetail({
				...option
			},'wxInformation',this.apiModule,option.id).then(data=>{
				this.item = data
				this.$u.mpShare = {
					title: data.title,
					imageUrl:this.imgFilter(data.img)
				}
			}),
      this.getInformationComments()
		},
		methods:{
      // 查看所有评论
    goCommentsDatail(){
      this.$u.route({
        url:'pagesA/newDetail/commentsDetail',
        params: {
          informationId: this.option.id,
        }
      })
    },
      // 发送评论
    async saveComments(e){
      console.log(this.comments,'有了吧');
      if(this.comments.parentCreater) {
          await saveCommentsInfo({
           informationId: this.option.id,
           content: e,
           parentCreater: this.comments.parentCreater
         })
      } else {
        await saveCommentsInfo({
           informationId: this.option.id,
           content: e,
         })
      }
      this.comments = {}
      console.log(this.comments,'没有了吧');
      this.getInformationComments()
    },
      // 获取组件评论
    getContent(e){
      this.comments.content = e
    },
      // 删除评论
     async deleteCommentsId(data){
      console.log(data,'删除的对象');
      await delCommentvideoInfo(data)
      this.getInformationComments()
    },
     // 获取展会评论
    async getInformationComments(){
    console.log(this.option.id,' this.option.id');
    let res = await getInformationComments({informationId: this.option.id})
    console.log(res,'res');
    this.commentsList = res.content.slice(0,10) //外面展会页只显示10条数据
    },
    onFocus(e){
      console.log(e,'穿过');
      this.focus = e.focus,
      this.comments.parentCreater = e.creater
    },
      onFocus(e){
      console.log(e,'穿过');
      this.focus = e.focus,
      this.comments.parentCreater = e.creater
    },
			splitStr(str){
				return str&&str.split(',') || []
			},
			//预览
			bannerListPreview(index){
				this.previewUrls(this.bannerList,index)
			},
			//自定义返回
			customBack(){
				if([1007,1008].includes(this.scene)){
					//单聊或群聊分享进入
					this.$store.dispatch('scene',null)
					this.$u.route({
						type:"reLaunch",
						url:"/pages/index/index"
					})
					return false;
				}
				this.$u.route({
					type:"back"
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.padding-env{
		padding-bottom: calc(env(safe-area-inset-bottom) + 50px)
	}
	.content{
		// flex-direction: column;
		// align-items: normal;
		// height: 100rpx;
    padding-bottom: 150rpx !important;
	}
	
.share{
	.open-share{
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
}

.title-border {
  height: 1rpx;
  border-bottom: 1rpx solid #F0F1F5;
  margin-top: 4rpx;
}

.comentsNone {
  height: 120rpx;
  width: 100%;
  text-align: center;
  line-height: 120rpx;
  color: #999;
  font-size: 20rpx;
}

</style>
